<template>
	<view>
		<u-popup :show="show" mode="bottom" :round='20' :closeOnClickOverlay='false'>
			<view class="u-p-30">
				<view class="u-m-tb-20">
					个人信息
				</view>
				<view class="u-m-tb-10 chooseAvatarbox flex">
					<text>头像</text>
					<button style="opacity: 0;position:absolute;top:0px;left:0px;display:block;width:100%;height:100%;"
						type="default-light" @chooseavatar="onChooseAvatar" open-type="chooseAvatar"></button>
					<view v-if="!avatarUrl" class="pleaseholder w100 h100 u-m-l-40"></view>
					<image class="w100 h100 u-m-l-40" :src="avatarUrl" v-if="avatarUrl" mode="aspectFill"></image>
				</view>
				<u-line></u-line>
				<view class="u-m-tb-10  u-p-tb-20 chooseAvatarbox flex">
					<text>昵称</text>
					<input type="nickname" class="u-m-l-40" placeholder="获取昵称" @getuserinfo="getUserInfo"
						@blur="handleBlur" />
				</view>
				<u-line></u-line>
				<view class="u-m-tb-10 u-p-tb-20 chooseAvatarbox flex">
					<text>手机号</text>
					<button style="opacity: 0;position:absolute;top:0px;left:0px;display:block;width:100%;height:100%;"
						type="default-light" @getphonenumber="getPhoneNumber" open-type="getPhoneNumber"></button>
					<text class="u-m-l-40">{{phone}}</text>
				</view>
				<u-line></u-line>
				<view class="u-m-tb-40" @click="close">
					<view class="sure u-radius-10 u-p-16 u-font-28 u-font-bold">
						开通授权
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "getavata",
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},

		data() {
			return {
				nickName: '',
				avatarUrl: '',
				phone:'获取手机号',
				file_id:''
			};
		},
		methods: {
			close() {
				//【登录】保存用户头像昵称手机号
				if(!this.file_id){
					return this.$toast('请上传头像')
				}
				if(!this.nickName){
					return this.$toast('请获取昵称')
				}
				if(this.phone=='获取手机号'){
					return this.$toast('请点击《获取手机号》')
				}
				this.$api.post('/user/personal',{
					form:{
						avatarId:this.file_id,
						nickName:this.nickName,
						mobile:this.phone,
						qrcode:uni.getStorageSync('qrcode')
					}
				}).then(res=>{
					uni.removeStorageSync('qrcode')
					this.$toast(res.message)
					this.$emit('close', false)
				})
			},
			getUserInfo(event) {
				if (event.detail.userInfo) {
					this.nickName = event.detail.userInfo.nickName;
				}
			},
			// 当input框失去焦点时触发，用于更新数据绑定
			handleBlur(event) {
				this.nickName = event.detail.value;
			},
			onChooseAvatar(e) {
				var that =this 
				if (e.detail.avatarUrl) {
					this.avatarUrl = e.detail.avatarUrl; // 更新头像URL
					console.log(this.avatarUrl);
					uni.uploadFile({
						url: this.$uploadUrl,
						filePath: e.detail.avatarUrl,
						name: "file",
						formData: {
							filePath: e.detail.avatarUrl,
						},
						header:{
							'token':uni.getStorageSync('token')
						},
						success(res) {
							console.log(JSON.parse(res.data));
							that.file_id = JSON.parse(res.data).data.fileInfo.file_id
						}
					})
				}
			},
			getPhoneNumber(event) {
				var that = this
				if (event.detail.errMsg === 'getPhoneNumber:ok') {
					// 用户同意授权后，event.detail 中包含加密信息
					console.log(event.detail.encryptedData, event.detail.iv);
					that.$api.post('/user/wxphone',{
						form:{
							encryptedData:event.detail.encryptedData,
							iv:event.detail.iv
						}
					}).then(res=>{
						if(res.data.need_login==1){
							uni.login({
							  provider: 'weixin',
							  success({ code }) {
								that.$api.post('/Passport/loginMpWx',{
									form:{
										code:code
									}
								}).then(res=>{
									this.$toast('请再次获取~')
									uni.setStorageSync('token',res.data.token)
								})
							  },
							  
							})
						}else{
							this.phone = res.data.phone
						}
					})
					// 这里需要将 encryptedData 和 iv 发送到你的服务器端进行解密，以获取用户手机号
					// 通常需要结合用户的 session_key 来解密
				} else {
					// 用户拒绝授权或获取失败
					console.log('获取手机号失败：', event.detail.errMsg);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.chooseAvatarbox {
		position: relative;
		align-items: center;

		.pleaseholder {
			background-color: #D8D8D8;
			border-radius: 50%;
		}
	}

	.sure {
		background-color: #3662EC;
		text-align: center;
		width: 400rpx;
		margin: 0 auto;
		color: #fff;
	}
</style>